<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<!--    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">-->

    <style>
        .cz a{
            border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;
        }
        .cz a:hover{background:#09F; color:#FFF; border-color:#09F; }
    </style>
</head>
<body>
<div class="panel admin-panel">
<!--    <div class="panel-head"><strong class="icon-reorder"> 数据备份</strong></div>
    <div class="padding border-bottom">
      <div class="layui-form-item layui-inline">
            <label class="layui-btn layui-form-label" style="text-align: center" th:onclick="query()">查询</label>
            <div class="layui-input-block">
                <input class="layui-input" id="title" name="title" placeholder="输入操作员" autocomplete="off"/>
            </div>
        </div>
    </div>-->
    <table id="demo" lay-filter="test"></table>
    <!--<table id="coursetable" class="table table-hover text-center">
        <tr>
            <th width="5%">编号</th>
            <th width="20%">备份时间</th>
            <th width="20%">备份用户</th>
            <th width="20%">文件名</th>
            <th width="20%">路径</th>
            <th width="15%">操作</th>
        </tr>
        <tr>
            <th >1</th>
            <th >2016-10-26</th>
            <th >系统备份</th>
            <th >20161026104053.sql</th>
            <th >D:\MysqlBackup</th>
            <th >///</th>
        </tr>
    </table>-->

</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<!--<script th:src="@{/js/pintuer.js}"></script>-->
<script th:src="@{/layui/layui.js}"></script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">立即备份</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:inline="javascript">
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 450
                ,url: '/data/fen' //数据接口
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,page: true //开启分页
                ,cols: [[ //表头
                   /* {type:'checkbox', fixed: 'left'}
                    ,*/{field: 'id', title: '编号', width:120, sort: true, fixed: 'left'}
                    ,{field: 'createTime', title: '备份时间', width:125, sort: true,templet:"<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"}
                    ,{field: 'operator', title: '操作员', width:125}
                    ,{field: 'sqlname', title: '文件名', width:300}
                    ,{field: 'absolutepath', title: '存储路径', width: 500}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
            });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        /*Ajax执行备份*/
                        $.ajax({
                            type:'post',
                            url:'/data/newData',
                            dataType: "text",
                            async: false,
                            success:function (data) {
                                if (data == 1){
                                    layer.msg("备份成功！");
                                    setInterval(function () {
                                        location.reload()//注意后面DIV的ID前面的空格，很重要！没有空格的话，会出双眼皮！（也可以使用类名）
                                    }, 3000);//8秒自动刷新

                                }
                            }
                        });
                        break;
                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('左侧提供了数据的导出和打印功能');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            type:'post',
                            url:'/data/del/'+data.id,
                            dataType: "text",
                            async: false,
                            success:function (data) {
                                if (data == 1){
                                    layer.msg("删除成功！");
                                    setInterval(function () {
                                    }, 3000);//8秒自动刷新
                                }
                            }
                        });
                        obj.del();
                        layer.close(index);
                    });
                }/* else if(obj.event === 'edit'){
                    layer.prompt({
                        formType: 2
                        ,value: data.operator
                    }, function(value, index){
                        obj.update({
                            operator: value
                        });
                        console.log(data);
                        layer.close(index);
                    });
                }*/
            });
        });
</script>
</html>